<template>
	<view class="container">
		<myNavigate @changecity="changecity" :cityname="cityname"></myNavigate>
		<view class="sortlist">
			<myTab v-if="secCates.length>0" @tabClick="chikdClick" ref="mid" isCate border='#ee5b25' :tabs='secCates'></myTab>
		</view>
		<view class="district-wrap">
			<!-- <image :src="bannimage" class="topPic" mode=""></image> -->
			<!-- <view class="firstItem" @click="toDetail">
				<image src="/static/pt.jpg" class="storeImg"></image>
				<view class="title">
					<view class="titleLeft">
						<view class="storeName">
							伊丽惠美容养生馆（万达店）
						</view>
						<uniRate activeColor="#f7b804" :size="10" :disabled="true" :value='3'></uniRate>
						<text class="madeIt">订</text>
					</view>
					<view class="freeValue">
						免费总值<text class="value">￥1196</text>
					</view>
				</view>
				<view class="secondRow">
					<text class="commentCount">12条评论</text>
					<text class="item"> 桂裕养生馆</text>goodItem
					<text class="item">"手法很好,服务也不错"</text>
				</view>
				<view class="excharge">
					<image src="../static/excharge.png" class="myPic" mode=""></image>
					<view class="rightItem">
						<view>[精油按摩]259元身体舒压精油</view>
						<view>[SPA按摩]身体舒压护理年卡</view>
					</view>
				</view>
			</view> -->
			<view class="normalBox" @click="toDetail(item.shopId)" v-for="(item,index) in shoplist" :key="index">
				<view class="content">
					<image :src="item.shopImg" class="storeImg"></image>
					<view class="context">
						<view class="title">
							<view class="storeName">
								{{item.shopName}}
							</view>
							<view class="freeValue">
								免费总价值<text class="value">￥{{item.freeTotalPrice}}</text>
							</view>
						</view>
						<view class="secondRow">
							<uniRate activeColor="#f7b804" :size="10" :disabled="true" :value='3'></uniRate>
							<text class="commentCount">12条评论</text>
						</view>
						<view class="item">
							{{item.shopCompany}}
						</view>
						<!-- <view class="item">
							"手法很好,服务也不错"
						</view> -->
					</view>
				</view>
				<view class="excharge">
					<view class="exchargeleft">
						<image src="../static/excharge.png" class="myPic" mode=""></image>
						<view class="rightItem">{{item.goodsName}}</view>
					</view>
					<view>{{item.freeGoodsName}}</view>
				</view>
			</view>
		</view>
		<empty v-if="showempty" emptyText="无对应店铺"></empty>

		<uni-load-more v-if="needLoad" :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import myNavigate from "@/components/myNavigateBar/myNavigateBar.vue"
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty.vue"
	import myTab from "@/components/scrollTab/scrollTab.vue";
	export default {
		components: {
			uniRate,
			myNavigate,
			uniLoadMore,
			myTab,
			empty
		},
		data() {
			return {
				cityname: '',
				catId: '',
				shoplist: [],
				secCates: [],
				page: '1',
				loading: false,
				loadingType: 'more',
				isdone: false,
				needLoad: true,
				showempty: false,
				bannimage: ''
			};
		},
		onLoad() {
			this.getsortlist();
			this.getshoplist();
			if (uni.getStorageSync('mycity')) {
				this.cityname = uni.getStorageSync('mycity')
			} else {

			}
		},
		methods: {
			onReachBottom() {
				let that = this;
				if (that.isdone) {
					return false;
				}
				that.loading = true;
				that.page++;
				that.loadingType = 'loading';
				that.getshoplist();
			},
			chikdClick(data) {
				console.log(data)
				this.catId = data.item.catId
				this.shoplist = [];
				this.isdone = false;
				this.page = 1;
				this.getshoplist()
			},
			changecity(e) {
				this.cityname = e;
			},
			getsortlist() {
				let that = this;
				that.$Request.request('/api/shop/catList', 'GET').then(res => {
					if (res.status == 1) {
						that.secCates = res.data.list;
					}

				})
			},

			getshoplist() {
				let that = this;
				console.log(that.isdone, '2')
				if (that.isdone) {
					return false;
				}
				// if(iswaitload){
				// 	return false;
				// }
				let data = {
					catId: that.catId,
					latitude: getApp().globalData.globa_latitude,
					longitude: getApp().globalData.globa_longitude,
					p: that.page
				}
				that.$Request.request('/api/shop/physicalShopList', 'GET', data).then(res => {
					if (res.status == 1) {

						res.data.list.forEach(item => {
							that.shoplist.push(item)
						})
						that.bannimage = res.data.bannerImg
						that.loadingType = 'more'
						if (res.data.list.length < 20) {
							that.loading = true;
							that.isdone = true;
							that.loadingType = 'noMore'
						}

						that.shoplist.length == 0 ? [this.showempty = true, this.needLoad = false] : [this.showempty = false, this.needLoad =
							true
						]
					}
				}).catch(err => {
					console.log(err)
				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/district/districtDetail/districtDetail?shopId=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.sortlist {
		padding: 20upx;
		background-color: #fff;
	}

	@import './districtList.scss'
</style>
